<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>航班查询</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 80%;
            margin: auto;
        }
        h1 {
            text-align: center;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 10px;
            border: 1px solid #ddd;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        input[type=text], select {
            width: 200px;
            padding: 5px;
            margin: 0 4px;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        a {
            background-color: #4CAF50;
            color: white;
            padding: 2px 4px;
            margin: 8px 0;
            border: none;
            border-radius: 1px;
            cursor: pointer;
        }
        a:hover {
            opacity: 0.8;
        }
    </style>
    <!-- 省略了<head>和上面的样式部分 -->
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
                $("#tbody").empty();
                $.get('flights/search', function (flights) {
                    JSON.stringify(flights);
                    flights.forEach(function (flight) {
                        $("<tr>\n" +
                            "         <td>"+flight.airline+"/"+flight.flightCode+"</td>\n" +
                            "         <td>"+flight.takeTime+" - "+flight.landingTime+"</td>\n" +
                            "         <td>"+flight.takeAirportName+"<br/>"+flight.landingAirportName+"</td>\n" +
                            "         <td>"+flight.flightTime+"</td>\n" +
                            "         <td>"+flight.stopAirport +"</td>\n" +
                            "         <td>"+flight.referencePrice+"<br/>"+ " <a name='" + flight.id+ "' title='button1' >查询机票</a></td>\n" +
                            "    </tr>"+
                        "<tr><td><div name='"+flight.id+"' title='123'></div></td></tr>").appendTo("#tbody");
                    });
                });
            $(document).on("click","a",function () {
                var id=$(this).attr("name");
                $("div[title='123']").empty();
                $.get('flights/searchById',{id:id}, function (flight) {
                    JSON.stringify(flight);
                    for(var i=0;i<flight.length;i++){
                        $("<tr><td>"+flight[i].sellCompany+"</td><td>"+flight[i].ticketPrice+"</td></tr>").appendTo("div[name='"+id+"']");
                    }
                });
            });
        });

        $(document).on("click","#submit",function () {

            var flightDate=$("#date").val();
            var takeCity=$("#from_city").val();
            var landingCity=$("#to_city").val();
            $("div[title='123']").empty();
            $.get('flights/search',{"flightDate":flightDate,"takeCity":takeCity,"landingCity":landingCity}, function (flights) {
                JSON.stringify(flights);
                $("#tbody").empty();
                flights.forEach(function (flight) {
                    $("<tr>\n" +
                        "         <td>"+flight.airline+"/"+flight.flightCode+"</td>\n" +
                        "         <td>"+flight.takeTime+" - "+flight.landingTime+"</td>\n" +
                        "         <td>"+flight.takeAirportName+"<br/>"+flight.landingAirportName+"</td>\n" +
                        "         <td>"+flight.flightTime+"</td>\n" +
                        "         <td>"+flight.stopAirport +"</td>\n" +
                        "         <td>"+flight.referencePrice+"<br/>"+ " <a name='" + flight.id+ "' title='button1' >查询机票</a></td>\n" +
                        "    </tr>"+
                        "<tr><td><div name='"+flight.id+"' title='123'></div></td></tr>").appendTo("#tbody");
                });
            });
        });

    </script>
</head>
<body>
<div class="container">
    <h1>航班查询</h1>

    <!-- 查询表单 -->

        <label for="date">日期:</label>
        <input type="date" id="date" name="date" value="2013-4-18"><br><br>
        <label for="from_city">城市:</label>
        <input id="from_city" name="from_city">
<!--            <option value="北京">北京</option>-->
            <!-- 其他选项可以在这里添加 -->
        </input>

        <label for="to_city">到:</label>
        <input id="to_city" name="to_city">
<!--            <option value="吉隆坡">吉隆坡</option>-->
            <!-- 其他选项可以在这里添加 -->
        </input>

        <button type="submit" id="submit">搜索</button>


    <!-- 航班列表 -->
    <table>
        <thead>
        <tr>
            <th>航空公司/航班机型</th>
            <th>起降时间</th>
            <th>机场</th>
            <th>飞行时长</th>
            <th>经停</th>
            <th>参考报价</th>
        </tr>
        </thead>
     <tbody id="tbody" >
     <tr>
         <td name="123">南方航空CZ4051/空客330(宽体机)</td>
         <td>1:30 - 8:00</td>
         <td>首都机场 吉隆坡国际机场</td>
         <td>6小时30分钟</td>
         <td>无经停</td>
         <td>￥1840 <button type="button">查询机票</button></td>
     </tr>
     <tr>
         <td>马来西亚航空MH361/空客330(宽体机)</td>
         <td>1:30 - 8:00</td>
         <td>首都机场 吉隆坡国际机场</td>
         <td>6小时30分钟</td>
         <td>无经停</td>
         <td>￥2300 <button type="button">查询机票</button></td>
     </tr>
     <tr>
         <td>亚洲航空D7317/空客330(宽体机)</td>
         <td>2:30 - 8:55</td>
         <td>首都机场 吉隆坡国际机场</td>
         <td>6小时25分钟</td>
         <td>无经停</td>
         <td>￥1209 <button type="button">查询机票</button></td>
     </tr>
     </tbody>

    </table>
</div>




</body>
</html>
